<template>
  <view class="reservation-page">
    <!-- 顶部导航 -->
    
    <!-- 主要内容 -->
    <view class="content">
			
		  <!-- 日期选择 -->
		  <view class="section date-section">
		    <view class="section-title">
		      <uni-icons type="calendar" size="20" color="#ff9f43"></uni-icons>
		      <text>选择日期</text>
		    </view>
		    <scroll-view scroll-x class="date-scroll">
		      <view 
		        v-for="(date, index) in dateList" 
		        :key="index"
		        :class="['date-item', activeDate === index ? 'active' : '']"
		        @click="selectDate(index)"
		      >
		        <text class="weekday">{{date.weekday}}</text>
		        <text class="day">{{date.day}}</text>
		        <text class="date">{{date.date}}</text>
		      </view>
		    </scroll-view>
		  </view>
		  <view class="subject-card">
				<view v-for="(subject, index) in subjects" :key="index"
					:class="['subject-item', activeSubject === index ? 'active' : '']"
					@click="selectSubject(index)">
					<text class="subject-name">{{subject.name}}</text>
					<text class="subject-desc">{{subject.desc}}</text>
				</view>
			</view>
		  
		  <!-- 时段选择 -->
		  <view class="section time-section">
		    <view class="section-title">
		      <uni-icons type="clock" size="20" color="#2e86de"></uni-icons>
		      <text>选择时段</text>
		    </view>
		    <view class="time-grid">
		      <view 
		        v-for="(time, index) in timeSlots" 
		        :key="index"
		        :class="['time-item', time.disabled ? 'disabled' : '', activeTime === index ? 'active' : '']"
		        @click="selectTime(index)"
		      >
		        <text>{{time.start}} - {{time.end}}</text>
		        <text v-if="time.disabled" class="full-text">已约满</text>
		      </view>
		    </view>
		  </view>
		  
		  <!-- 教练选择 -->
		  <view class="section coach-section" v-if="false">
		   <view class="section-title">
		      <uni-icons type="person" size="20" color="#10ac84"></uni-icons>
		      <text>选择教练</text>
		    </view>
		    <scroll-view scroll-x class="coach-scroll">
		      <view 
		        v-for="(coach, index) in coaches" 
		        :key="index"
		        :class="['coach-item', activeCoach === index ? 'active' : '']"
		        @click="selectCoach(index)"
		      >
		        <image :src="coach.avatar" class="coach-avatar"></image>
		        <text class="coach-name">{{coach.name}}</text>
		        <text class="coach-rate">
		          <uni-icons type="star-filled" size="14" color="#ff9f43"></uni-icons>
		          {{coach.rate}}
		        </text>
		      </view>
		    </scroll-view>
			<!-- 车辆信息 -->
			
			
		  </view>
		  <!-- 预约按钮 -->
		  <view class="reservation-btn" @click="confirmReservation">
		    <text>立即预约</text>
		  </view>
		  
		  
		 
	</view>
    
    <!-- 预约确认弹窗 -->
    <uni-popup ref="confirmPopup" type="center" :mask-click="false">
      <view class="confirm-popup">
        <view class="popup-header">
          <text class="popup-title">确认预约信息</text>
        </view>
        <view class="popup-content">
          <view class="info-item">
            <text class="info-label">日期：</text>
            <text class="info-value">{{selectedDate.weekday}} {{selectedDate.date}}</text>
          </view>
          <view class="info-item">
            <text class="info-label">时段：</text>
            <text class="info-value">{{selectedTime.start}} - {{selectedTime.end}}</text>
          </view>
          <view class="info-item">
            <text class="info-label">教练：</text>
            <text class="info-value">{{selectedCoach.name}} (评分: {{selectedCoach.rate}})</text>
          </view>
          <view class="info-item">
            <text class="info-label">车辆：</text>
            <text class="info-value">{{selectedCar.model}} ({{selectedCar.number}})</text>
          </view>
        </view>
        <view class="popup-footer">
          <button class="cancel-btn" @click="cancelReservation">取消</button>
          <button class="confirm-btn" @click="submitReservation">确认预约</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>

export default {
  data() {
    return {
      activeDate: 0,
      activeTime: -1,
      activeCoach: -1,
      dateList: this.generateDateList(),
      timeSlots: [
        { start: '08:00', end: '09:30', disabled: false },
        { start: '09:30', end: '11:00', disabled: false },
        { start: '11:00', end: '12:30', disabled: true },
        { start: '13:30', end: '15:00', disabled: false },
        { start: '15:00', end: '16:30', disabled: false },
        { start: '16:30', end: '18:00', disabled: false },
        { start: '18:00', end: '19:30', disabled: false },
        { start: '19:30', end: '21:00', disabled: true }
      ],
      coaches: [
        { id: 1, name: '张教练', avatar: 'https://pic1.zhimg.com/80/v2-6afa72220d29f045a4b1b9f8a2b9c1b9_720w.webp', rate: 4.8, available: true },
        { id: 2, name: '李教练', avatar: 'https://pic1.zhimg.com/80/v2-3b4b6e7b8c1d1e0e8e0e8e0e8e0e8e0e_720w.webp', rate: 4.9, available: true },
        { id: 3, name: '王教练', avatar: 'https://pic1.zhimg.com/80/v2-6afa72220d29f045a4b1b9f8a2b9c1b9_720w.webp', rate: 4.7, available: true },
        { id: 4, name: '刘教练', avatar: 'https://pic1.zhimg.com/80/v2-3b4b6e7b8c1d1e0e8e0e8e0e8e0e8e0e_720w.webp', rate: 4.6, available: false }
      ],
      cars: [
        { id: 1, model: '大众捷达', number: '粤A·1234学', desc: '手动挡，车况良好', image: 'https://pic1.zhimg.com/80/v2-6afa72220d29f045a4b1b9f8a2b9c1b9_720w.webp' },
        { id: 2, model: '丰田卡罗拉', number: '粤A·5678学', desc: '自动挡，新车', image: 'https://pic1.zhimg.com/80/v2-3b4b6e7b8c1d1e0e8e0e8e0e8e0e8e0e_720w.webp' }
      ],
      selectedCar: {},
	  subjects: [{
	  		id: 1,
	  		name: '科目二',
	  		desc: '场地驾驶技能考试',
	  		icon: '/static/image/kemu.png'
	  	},
	  	{
	  		id: 2,
	  		name: '科目三',
	  		desc: '道路驾驶技能考试',
	  		icon: '/static/image/kemusan.png'
	  	}
	  ],
	  activeSubject: -1,
    }
  },
  computed: {
    selectedDate() {
      return this.dateList[this.activeDate] || {}
    },
    selectedTime() {
      return this.timeSlots[this.activeTime] || {}
    },
    selectedCoach() {
      return this.coaches[this.activeCoach] || {}
    }
  },
  created() {
    this.selectedCar = this.cars[0]
  },
  methods: {
	  // 选择科目
	selectSubject(index) {
	  	this.activeSubject = index
	},
    // 生成日期列表
    generateDateList() {
      const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      const days = []
      const today = new Date()
      
      for (let i = 0; i < 7; i++) {
        const date = new Date(today)
        date.setDate(today.getDate() + i)
        
        days.push({
          weekday: weekdays[date.getDay()],
          day: date.getDate(),
          date: `${date.getMonth() + 1}月${date.getDate()}日`,
          fullDate: date
        })
      }
      
      return days
    },
    
    // 选择日期
    selectDate(index) {
      this.activeDate = index
      // 实际项目中可以根据日期加载可预约时段
    },
    
    // 选择时段
    selectTime(index) {
      if (this.timeSlots[index].disabled) return
      this.activeTime = index
    },
    
    // 选择教练
    selectCoach(index) {
      if (!this.coaches[index].available) return
      this.activeCoach = index
    },
    
    // 返回
    goBack() {
      uni.navigateBack()
    },
    
    // 确认预约
    confirmReservation() {
      if (this.activeTime === -1) {
        uni.showToast({
          title: '请选择练车时段',
          icon: 'none'
        })
        return
      }
      
      if (this.activeCoach === -1) {
        uni.showToast({
          title: '请选择教练',
          icon: 'none'
        })
        return
      }
      
      this.$refs.confirmPopup.open()
    },
    
    // 取消预约
    cancelReservation() {
      this.$refs.confirmPopup.close()
    },
    
    // 提交预约
    submitReservation() {
      // 实际项目中调用API提交预约
      // uni.request({
      //   url: '/api/driving/reserve',
      //   method: 'POST',
      //   data: {
      //     date: this.selectedDate.fullDate,
      //     time: this.selectedTime,
      //     coachId: this.selectedCoach.id,
      //     carId: this.selectedCar.id
      //   },
      //   success: (res) => {
      //     this.$refs.confirmPopup.close()
      //     uni.navigateTo({
      //       url: '/pages/driving/reservationSuccess'
      //     })
      //   }
      // })
      this.$emit('success',true)
	  console.log('打印')
      // 模拟成功
      // setTimeout(() => {
      //   this.$refs.confirmPopup.close()
      //   uni.navigateTo({
      //     url: '/pages/driving/reservationSuccess'
      //   })
      // }, 800)
    }
  }
}
</script>

<style lang="scss" scoped>
	.subject-card {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20rpx;
			margin-bottom: 20px;
	
			.subject-item {
				background-color: #fff;
				border-radius: 12px;
				padding: 20px 15px;
				display: flex;
				flex-direction: column;
				align-items: center;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
				border: 2px solid transparent;
	
				.subject-icon {
					width: 200rpx;
				}
	
				.subject-name {
					font-size: 18px;
					font-weight: bold;
					color: #333;
					margin-bottom: 5px;
				}
	
				.subject-desc {
					font-size: 12px;
					color: #999;
				}
	
				&.active {
					border-color: #ff80ab;
					background-color: #f9f0ff;
	
					.subject-name {
						color: #ff80ab;
					}
				}
			}
		}

.reservation-page {
  // height: 1850rpx;
  display: flex;
  flex-direction: column;
  background-color: #f5f6fa;
  border-radius:  0 0 20rpx 20rpx;
  
  .header {
    position: relative;
    height: 180px;
    
    .header-bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 180px;
      background: linear-gradient(135deg, #ff80ab 0%, #ff4081 100%);
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
    }
    
    .header-content {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 25px 20px;
	  
      padding-top: var(--status-bar-height);
      
      .title {
		  margin-top: 20rpx;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
      }
    }
  }
  
  .content {
    // flex: 1;
    padding: 15px;
    margin-top: -30px;
    position: relative;
    z-index: 1;
  }
  
  .section {
    background-color: #fff;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    
    .section-title {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      font-size: 16px;
      font-weight: bold;
      color: #333;
      
      text {
        margin-left: 8px;
      }
    }
  }
  
  .date-section {
    .date-scroll {
      white-space: nowrap;
      
      .date-item {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        width: 70px;
        padding: 10px 5px;
        margin-right: 10px;
        border-radius: 10px;
        background-color: #f5f6fa;
        color: #666;
        
        .weekday {
          font-size: 14px;
          margin-bottom: 5px;
        }
        
        .day {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 3px;
        }
        
        .date {
          font-size: 12px;
        }
        
        &.active {
          background: linear-gradient(to bottom right,#ff80ab, #ff4081);
          color: #fff;
          box-shadow: 0 5px 15px rgba(214, 214, 214, 0.3);
        }
      }
    }
  }
  
  .time-section {
    .time-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      
      .time-item {
        padding: 12px 5px;
        border-radius: 8px;
        background-color: #f5f6fa;
        text-align: center;
        font-size: 14px;
        color: #333;
        position: relative;
        overflow: hidden;
        
        .full-text {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: rgba(0, 0, 0, 0.5);
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
        }
        
        &.disabled {
          opacity: 0.6;
        }
        
        &.active {
          background: linear-gradient(135deg, #2e86de, #1e90ff);
          color: #fff;
          box-shadow: 0 5px 15px rgba(46, 134, 222, 0.3);
        }
      }
    }
  }
  
  .coach-section {
    .coach-scroll {
      white-space: nowrap;
      
      .coach-item {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        width: 100px;
        padding: 10px;
        margin-right: 10px;
        border-radius: 10px;
        background-color: #f5f6fa;
        
        .coach-avatar {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          margin-bottom: 8px;
          border: 2px solid #fff;
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }
        
        .coach-name {
          font-size: 14px;
          font-weight: bold;
          margin-bottom: 3px;
          color: #333;
        }
        
        .coach-rate {
          font-size: 12px;
          color: #ff9f43;
        }
        
        &.active {
          background:  linear-gradient(135deg, #e0f7fa, #a7ffeb);
          // linear-gradient(to right, #ff80ab, #ff4081)
          .coach-name, .coach-rate {
            // color: #fff;
          }
        }
      }
    }
  }
  
  .car-section {
    .car-info {
      display: flex;
      align-items: center;
      
      .car-image {
        width: 100px;
        height: 60px;
        border-radius: 8px;
        margin-right: 15px;
        object-fit: cover;
      }
      
      .car-detail {
        flex: 1;
        
        .car-model {
          display: block;
          font-size: 16px;
          font-weight: bold;
          color: #333;
          margin-bottom: 5px;
        }
        
        .car-number {
          display: block;
          font-size: 14px;
          color: #666;
          margin-bottom: 5px;
        }
        
        .car-desc {
          display: block;
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
  
  .reservation-btn {
    margin: 25px 0;
    padding: 15px;
    background: linear-gradient(135deg, #ff9f43, #ff6b6b);
    color: #fff;
    text-align: center;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
  }
  
  .confirm-popup {
    width: 80vw;
    background-color: #fff;
    border-radius: 16px;
    overflow: hidden;
    
    .popup-header {
      padding: 20px;
      background: linear-gradient(135deg, #ff80ab 0%, #ff4081 100%);
      
      .popup-title {
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        text-align: center;
      }
    }
    
    .popup-content {
      padding: 20px;
      
      .info-item {
        display: flex;
        margin-bottom: 12px;
        
        .info-label {
          font-weight: bold;
          color: #333;
          width: 70px;
        }
        
        .info-value {
          flex: 1;
          color: #666;
        }
      }
    }
    
    .popup-footer {
      display: flex;
      border-top: 1px solid #f0f0f0;
      
      button {
        flex: 1;
        height: 50px;
        line-height: 50px;
        border-radius: 0;
        font-size: 16px;
        border: none;
        
        &::after {
          border: none;
        }
      }
      
      .cancel-btn {
        background-color: #f5f6fa;
        color: #666;
      }
      
      .confirm-btn {
        background: linear-gradient(135deg, #ff80ab 0%, #ff4081 100%);
        color: #fff;
      }
    }
  }
}
</style>